﻿@model EventSys.BussinesEntities.Actividad

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@section scripts{

    <script type="text/javascript">

        $(function () {
            //evento para agregar una nueva fila INVERSION
            var row = 0;
            $(document).on('click', '.clsAgregarFila', function () {
                //$("#add").click(function (e) {   // probando con el boton "id="add""  igual funciona
                //    e.preventDefault();

                var strNueva_Fila = '<tr>' +
                    //'<td><input name="Inversions[' + row + '].TipoAsistente" type="text" value='+listBox+' /></td>\n' +
                    '<td> <select name="Inversions[' + row + '].TipoAsistente" >' +
                        '<option selected> Eliga Asistente </option>' +
                        '<option>Egresado</option>' +
                        '<option>Estudiante</option>' +
                        '<option>Otros</option>' +
                        '</select> </td>\n' +
                    '<td ><input type="text" name="Inversions[' + row + '].Monto" value="" id="monto" /></td>\n' +
                    '<td><input type="button" id="eliminar" name="eliminar" value="Eliminar" class= "clsEliminar" /></td>\n' +
                    '</tr>';

                var objTabla = $(this).parents().get(3);

                //agregamos la nueva fila a la tabla
                $(objTabla).find('#detalleInv > tbody').append(strNueva_Fila);
                //si el cuerpo la tabla esta oculto (al agregar una nueva fila) lo mostramos
                if (!$(objTabla).find('tbody').is(':visible')) {
                    //le hacemos clic al titulo de la tabla, para mostrar el contenido
                    $(objTabla).find('caption').click();
                }
                row++;
            });

            /* Eliminar Fila de Inversion   */
            $(document).on('click', ".clsEliminar", function (e) {
                e.preventDefault();

                var tr = $(this).parents("tr");

                $(tr).fadeOut("slow", function () {
                    $(tr).remove();

                    $("#detalleInv tbody tr").each(function (index, element) {
                        var fila = $(element);
                        //$(fila).find('input[name$="TipoAsistente"]').attr("name", 'Inversions[' + index + '].TipoAsistente');
                        //objeto        terminacion del name            nombre completo + el index
                        $(fila).find('select[name$="TipoAsistente"]').attr("name", 'Inversions[' + index + '].TipoAsistente');
                        $(fila).find('input[name$="Monto"]').attr("name", 'Inversions[' + index + '].Monto');
                    });
                });
            });


            //evento para agregar una nueva fila MATERIALES
            var rows = 0;
            $(document).on('click', '.clsAddFila', function () {
                //$("#add").click(function (e) {   // probando con el boton "id="add""  igual funciona
                //    e.preventDefault();

                var strNueva_Fila = '<tr class="' + row + '">' +
                    '<td style="width:150px"><input name="Materials[' + row + '].Material" type="text" value="" style="width:150px"/></td>\n' +
                    '<td style="width:35px"><input type="text" name="Materials[' + row + '].Cantidad" value="" id="cant" style="width:35px"/></td>\n' +
                    '<td style="width:35px"><input name="Materials[' + row + '].Precio" type="text" value="" id="precio" style="width:35px"/></td>\n' +
                    '<td style="width:35px"><input type="text" name="Materials[' + row + '].Monto" value="" id="monto" style="width:35px"/></td>\n' +
                    '<td ><input type="button" id="eliminar" name="eliminar" value="Eliminar" class= "clsDelete" /></td>\n' +
                    '</tr>';

                var objTabla = $(this).parents().get(3);

                //agregamos la nueva fila a la tabla
                $(objTabla).find('#detMaterial > tbody').append(strNueva_Fila);
                //si el cuerpo la tabla esta oculto (al agregar una nueva fila) lo mostramos
                if (!$(objTabla).find('tbody').is(':visible')) {
                    //le hacemos clic al titulo de la tabla, para mostrar el contenido
                    $(objTabla).find('caption').click();
                }
                row++;
            });

            /* Eliminar Fila de Inversion   */
            $(document).on('click', ".clsDelete", function (e) {
                e.preventDefault();

                var tr = $(this).parents("tr");

                $(tr).fadeOut("slow", function () {
                    $(tr).remove();

                    $("#detMaterial tbody tr").each(function (index, element) {
                        var fila = $(element);
                        //$(fila).find('input[name$="TipoAsistente"]').attr("name", 'Inversions[' + index + '].TipoAsistente');
                        //objeto        terminacion del name            nombre completo + el index
                        $(fila).find('select[name$="Material"]').attr("name", 'Materials[' + index + '].Material');
                        $(fila).find('input[name$="Material"]').attr("name", 'Materials[' + index + '].Material');
                    });
                });
            });

            //PAra calcular el monto y total
            $(document).on('keyup', '#precio', function () {
                var p = 0;
                var c = 0;
                var t = 0;
                //$("#monto").val(m);
                //$("#total").val(row);
                $('#detMaterial tbody tr').each(function () {
                    c = parseFloat($(this).find('#cant').val());
                    p = parseFloat($(this).find('#precio').val());
                    m = c * p;
                    $(this).find('#monto').val(m)
                    t += parseFloat($(this).find('#monto').val());
                    $("#total").val(t);
                })
            })

        });

        $(document).ready(function () {
            $("#dura").keydown(function (e) {
                // Permite: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                    // Permite: Ctrl+A -----> para seleccionar todo el texto de la casilla
                    (e.keyCode == 65 && e.ctrlKey === true) ||
                    // Perimite: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                    // deja que suceda todo, no hacer nada
                    return;
                }
                // Se asegura de que se trata de un número y detiene la pulsación de tecla
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
        });

        $(document).ready(function () {
            $("#cap").keydown(function (e) {
                // Permite: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                    // Permite: Ctrl+A -----> para seleccionar todo el texto de la casilla
                    (e.keyCode == 65 && e.ctrlKey === true) ||
                    // Perimite: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                    // deja que suceda todo, no hacer nada
                    return;
                }
                // Se asegura de que se trata de un número y detiene la pulsación de tecla
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
        });

    </script>
}


<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Actividad</legend>

        <table>
            <tr>
                <td>  Nombre de Actividad  </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.NomActividad)
                        @Html.ValidationMessageFor(model => model.NomActividad)
                    </div>
                </td>
                <td> </td>
                <td>  Fecha  </td>
                <td>
                    @(Html.Kendo().DatePicker().Name("Fecha").Value("Fecha").HtmlAttributes(new {style ="width:110px"}))
                </td>
            </tr>

            <tr>
                <td> Tipo de Actividad: </td>
                <td>
                    <div class="editor-field">
                        @Html.DropDownList("IdTipoActividad")
                        @Html.ValidationMessageFor(model => model.IdTipoActividad)
                    </div>
                </td>
                <td> </td>
                <td> Hora: </td>
                <td>
                    @(Html.Kendo().TimePicker().Name("Hora").Value("Hora").HtmlAttributes(new { style = "width:70px"}))
                </td>
            </tr>
            <tr>
                <td> Duración: </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Duracion)
                        @Html.ValidationMessageFor(model => model.Duracion)
                    </div>
                </td>
                <td> </td>
                <td> Capacidad: </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Capacidad)
                        @Html.ValidationMessageFor(model => model.Capacidad)
                    </div>
                </td>
            </tr>
            <tr>
                <td> Lugar: </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Lugar)
                        @Html.ValidationMessageFor(model => model.Lugar)
                    </div>
                </td>
                <td> </td>
                <td> Dirección: </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Direccion)
                        @Html.ValidationMessageFor(model => model.Direccion)
                    </div>
                </td>
            </tr>

            <tr>
                <td> Ambiente: </td>
                <td>
                    <div class="editor-field">
                        @*@Html.EditorFor(model => model.idAmbiente)*@
                        @Html.DropDownList("idAmbiente")
                        @Html.ValidationMessageFor(model => model.idAmbiente)
                    </div>
                </td>
                <td> </td>
                <td> Descripción:  </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Descripcion)
                        @Html.ValidationMessageFor(model => model.Descripcion)
                    </div>
                </td>
            </tr>
            <tr>
                <td> Dirigido A: </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.DirigidoA)
                        @Html.ValidationMessageFor(model => model.DirigidoA)
                    </div>
                </td>
                <td>  </td>
                <td> id Evento: </td>
                <td style="visibility:hidden">
                    <div class="editor-field" >
                        @Html.DropDownList("idEvento")
                        @*@Html.EditorFor(model => model.idEvento)*@
                        @Html.ValidationMessageFor(model => model.idEvento)
                    </div>
                </td>
            </tr>

        </table>

        <!--  SECCION DE INVERSION   -->
@*        <fieldset style="border: 2px groove #ccc; background: #e8eac9; width: 300px;">
            <legend>Inversion</legend>
            <form action="javascript:fn_Agregar()" method="post" id="frmdetInv">
                <div id="divContenedorTabla">
                    <p>  <input type="button" value="Agregar" class="clsAgregarFila" id="agregarf">  </p>
                    <table id="detalleInv" class="lista" border="1">
                        <thead>
                            <tr>
                                <th>Tipo de Asistente</th>  <th>Monto</th>  <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>*@
            @*</form>
        </fieldset>*@

        <!--  SECCION DE Matriales   -->
        <fieldset style="border: 2px groove #ccc; background: #e8eac9; width: 300px;">
            <legend>Materiales</legend>
            @*<form action="javascript:fn_Agregar()" method="post" id="frmdetInv">*@
                <div id="contTablaMaterial">
                    <p>  <input type="button" value="Agregar" class="clsAddFila" id="addFM">  </p>
                    <table id="detMaterial" class="lista" border="1">
                        <thead>
                            <tr>
                                <th>Material</th>  <th>Cantidad</th> <th>Precio</th> <th>Monto</th>  <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            @*</form>*@
        </fieldset>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@*@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}*@

        <style>
            table /*#detalleInv*/ {
                background: #FDBB30;
                border-radius: 5px;
                border-spacing: 0px;
                border: solid 1px;
            }

                table /*#detalleInv*/ thead {
                    background: #232322;
                    font-weight: 700;
                    color: white;
                }

            #monto {
                width: 50px;
            }

            /*#detAuspiciadores {
                width: auto;
            }*/

            #idAusp {
                width: 30px;
                background: #FDBB30;
                text-align: center;
                font-weight: 500;
                border: none;
            }
        </style>